<template>
  <div class="home" @scroll="scroll">
    <cols-header v-show="show" class="fixed"></cols-header>
    <div class="content"></div>
  </div>
</template>

<script>
import colsHeader from '../components/colsHeader/colsHeader.vue'
export default {
  name: 'Home',
  components: {
    colsHeader
  },
  data() {
    return {
      show: false
    }
  },
  created() {
    
  },
  methods: {
    scroll(e) {
      this.show = e.target.scrollTop > 500 ? true : false
    }
  }
}
</script>
<style lang="scss">
  .home{
    height: 100%;
    overflow: auto;
    .content{
      height: 2000px;
      background-image: linear-gradient(blue, red, green);
    }
    .fixed{
      position: fixed;
      top: 0;
      left: 0;
    }
  }
</style>
